<template>
  <div class="page-container">
    <div class="body-container animate__animated animate__fadeIn">
      <div class="bgImg-container">
        <img v-lazy="bgImg" />
        <div class="title-container" >
        <div class="title-type"><h1>{{typename}}</h1></div>
        <div class="title-title">
          <h1>{{essayObject.title}}</h1>
        </div>
        <div class="title-date">
          编辑日期:{{essayObject.createdAt|formtTime}}
        </div>
      </div>
      </div>
      <div class="content-container" v-highlight v-html="html"></div>
      <div class="loader" v-show="showLoading">11111</div>
       <div class="end-container">-END-</div>
        <go-top :has-outline="false" :right="40"></go-top>
    </div>
  </div>
</template>

<script>
import GoTop from "@inotom/vue-go-top";
import ApiService from "@/service/index";
import { formtTime } from "@/utils/tools";
import { NAV, IMG_URL, ESSAY_BANNER } from "@/config/config";

const api = new ApiService();

export default {
  name: "EssayViews",
  components: {
    GoTop
  },
  filters:{formtTime},
  async created(){
    let tid = this.$route.query.originid;
    this.essayObject = await api.findEssayClick({tid});
    this.typename = this.essayObject.type.typename;
  },
  data() {
    return {
      bgImg: ESSAY_BANNER,
      targetLeft: IMG_URL + "target-left.png",
      targetRight: IMG_URL + "target-right.png",
      essayObject:{},
      typename:'',
      showLoading:true
    }
  },
  computed:{
    html(){
      return this.essayObject.content
    }
  },
  mounted(){
    window.scroll(0,0)
  }
};
</script>
<style lang="scss" scoped>
$theme: #f2db4d;
.loader {
  font-size: 15px;
  width: 15px;
  height: 15px;
  line-height: 10px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 110px;
  text-indent: -9999em;
  animation: load-effect 1s infinite linear;
}
@keyframes load-effect {
  0% {
    box-shadow: -3em 2em 0 0.5em $theme, 0 2em 0 0 $theme,
      3em 2em 0 -0.5em $theme;
  }
  25% {
    box-shadow: -3em 2em 0 0 $theme, 0 2em 0 -0.5em $theme, 3em 2em 0 0 $theme;
  }
  50% {
    box-shadow: -3em 2em 0 -0.5em $theme, 0 2em 0 0 $theme,
      3em 2em 0 0.5em $theme;
  }
  75% {
    box-shadow: -3em 2em 0 0 $theme, 0 2em 0 0.5em $theme, 3em 2em 0 0 $theme;
  }
  100% {
    box-shadow: -3em 2em 0 0.5em $theme, 0 2em 0 0 $theme,
      3em 2em 0 -0.5em $theme;
  }
}
.body-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.bgImg-container{
  width: 100%;
  height: 550px;
  position: relative;
  z-index: -1;
  img{
    width: 100%;
    height: 100%;
  }
  .title-container{
    width: 1100px;
    height: 250px;
    position: relative;
    margin:0 auto;
    margin-top: -400px;
    
    .title-type{
      color: #fff;
    }
    .title-title{
      color: #fff;
      width: 1100px;
      line-height: 50px;
    }
    .title-date{
      color: #fff;
      position: absolute;
      bottom: 5px;
      right: 0;
      font-size: 18px;
    }
  }
}

.content-container{
  width: 1100px;
  height: 100%;
  min-height: 300px;
  background-color: #fff;
  box-shadow:#999 0px 0px 10px;
  margin: 0 auto;
  margin-top: -120px;
  border-radius: 5px;
  padding: 30px;
  box-sizing: border-box;
}
.end-container{
  width: 90px;
  margin: 0 auto;
  margin-top: 20px;
}
</style>